<template>
  <div>
    <el-button size="mini" type="success" @click="RefreshFile()"
      >刷新</el-button
    >
    <el-table
      v-loading="loading"
      :data="logName"
      height="calc(100vh - 100px)"
      style="width: 100%; font-size: 18px; top: -3vh"
    >
      <el-table-column prop="value" label="日志名称">
        <template slot-scope="scope">
          <div
            style="color: black; cursor: pointer"
            @click="
              handleQuery(scope.row.value);
              logTableVisible = true;
            "
          >
            {{ scope.row.value }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="日志" :visible.sync="logTableVisible" width="70%">
      <el-table
        :data="logContent"
        height="800px"
        max-height="800px"
        v-loading="loadingTable"
      >
        <el-table-column label="日志内容">
          <template slot-scope="scope">
            <div v-html="scope.row" v-if="scope.row != ''"></div>
            <el-empty v-else description="空数据"></el-empty>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getlogFileName, getlogFile } from "@/api/assembly/cage";
export default {
  data() {
    return {
      logName: [],
      logContent: [],
      logTableVisible: false,
      loading: true,
      loadingTable: true,
    };
  },
  methods: {
    RefreshFile() {
      this.loading = true;
      this.logName = [];
      this.getlogFileName();
    },
    getlogFileName() {
      this.loading = true;
      getlogFileName().then((res) => {
        res.data.forEach((item) => {
          this.logName.push({
            value: item,
          });
        });
        this.loading = false;
      });
    },
    handleQuery(FileName) {
      this.loadingTable = true;
      this.logContent = [];
      getlogFile({ fileName: FileName }).then((res) => {
        this.logContent.push(res.data);
        this.loadingTable = false;
      });
    },
  },
  created() {
    this.getlogFileName();
  },
};
</script>
<style scoped lang="less">
/deep/ .el-dialog__body{
    padding: 0px 20px 20px 20px;
}
.el-button--success {
  position: relative;
  z-index: 999;
  float: right;
  top: 0.7vh;
}
</style>
